<!--
 * @Description:
 * @Author: 
 * @Date: 2023-08-16 09:16:52
 * @LastEditor: 
 * @LastEditTime: 2023-09-12 14:29:26
 
-->


<template>
	<view class="page_content">
		<view class="head_content">
			
			<!-- #ifndef MP-TOUTIAO -->
			<CustomNavbar :left="0" :title="navbarTitle"></CustomNavbar>
			<!-- #endif -->
			<view class="header_logo">
				<u-row>
					<u-col span="6" style="padding-left: 18px; padding-top: 4px;">
						<image class="" src="@/static/images/logo.png" mode="heightFix" style="height: 21px;"></image>
					</u-col>
					<u-col span="6" style="text-align: right; align-items: end; padding-right: 18px;">
						<view class="search" @click="jumpView('/pages/video/search')">
							<u-icon name="search" color="#fff" size="28"></u-icon>
							<text>搜索短剧名称</text>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="tabs_box">
				<u-tabs :list="contentList" :current="contentCurrent" :activeStyle="tabsActiveStyle"
					:inactiveStyle="tabsInactiveStyle" :lineColor="`url(/static/images/index-tab-bg.png) 100% 100% no-repeat`" lineBgSize="10px 9px"
					:lineWidth="contentCurrent === 0 ? 84 : 62" :lineHeight="9"
					@change="changeContent($event, 1)" />
			</view>
			
		</view>
		<view class="main_content" v-if="contentList && contentList.length">
			<swiper style="height: 100%" :skip-hidden-item-layout="true" :current="contentCurrent" @change="changeContent($event, 2)">
				<swiper-item style="height: 100%;" v-for="(item, index) in contentList" :key="item.id">
					<scroll-view style="height: 100%" :scroll-y="true" :refresher-enabled="true" :refresher-threshold="100" :refresher-triggered="refreshStatus" @refresherrefresh="refreshHandle" @scrolltolower="bottomHandle" @scroll="scrollHandle">
						<view class="content_box">
							<view class="list" v-if="item.id == 0">
								
								<view class="sitem" v-if="item.list[0]"
								  @click="maidian(item.list[0].id);openVideoDetail(item.list[0].id, item.list[0].title, item.list[0].image, item.list[0].description)">
									<view class="left">
										<image class="image" :src="item.list[0].image" mode="aspectFill"></image>
									</view>
									<view class="right">
										<view class="info">
											<view class="tbox">
												<view class="title">{{ item.list[0].title }}</view>
												<view class="text u-line-8">{{item.list[0].description}}</view>
											</view>
										</view>
										<view class="button" :class="{ collect: item.list[0].is_favorite == 1 }"
										  hover-class="active" :hover-start-time="0" :hover-stay-time="200"
											@click.stop="handleCollect(item.list[0].id, item.list[0].is_favorite, lIndex)">
											<u-icon :name="item.list[0].is_favorite == 1 ? 'star-fill' : 'star'" color="#eee" size="18"></u-icon>
											<text class="text">{{ item.list[0].is_favorite == 1 ? '已追剧' : '立即追剧' }}</text>
										</view>
									</view>
								</view>
								
							</view>
							
							<view class="" style="display: flex; align-items: center; padding: 12px 0;" v-if="item.id == 0">
								<u--image src="/static/images/index-video.png" width="25px" height="25px"></u--image>
								<text style="font-size: 18px; font-weight: 600;">短剧推荐</text>
							</view>
							<view class="tabs" v-if="item.id == 0">
								<view class="tab-item"
									:class="{ active: tabsActive.id == tabItem.id }" v-for="(tabItem, tabIndex) in tabsList" :key="tabIndex"
									@click="changeTabs(tabItem)">{{ tabItem.name }}</view>
							</view>
							<view class="list" v-if="item.id == 0">
								
								
								<block v-for="(lItem, lIndex) in item.list" :key="lIndex">
									<!-- <view class="sitem" v-if="lIndex % 10 == 0" @click="maidian(lItem.id);openVideoDetail(lItem.id, lItem.title, lItem.image, lItem.description)">
										<view class="left">
											<image class="image" :src="lItem.image" mode="aspectFill"></image>
										</view>
										<view class="right">
											<view class="info">
												<view class="tbox">
													<view class="title">{{ lItem.title }}</view>
													<view class="text u-line-5">{{ lItem.description }}</view>
												</view>
											</view>
											<view class="button" :class="{ collect: lItem.is_favorite == 1 }" hover-class="active" :hover-start-time="0" :hover-stay-time="200" @click.stop="handleCollect(lItem.id, lItem.is_favorite, lIndex)">
												<u-icon :name="lItem.is_favorite == 1 ? 'star-fill' : 'star'" color="#eee" size="18"></u-icon>
												<text class="text">{{ lItem.is_favorite == 1 ? '已追剧' : '追剧' }}</text>
											</view>
										</view>
									</view> -->
									
									<!-- #ifdef APP -->
										<view class="item item1" v-if="lIndex != 0">
											<view   v-if="lieAd&&lIndex % 6== 0 && lIndex!=0" >
												<view>
													<view class="img">
														<ad-custom :unit-id="lieid" bindload="adLoad" binderror="adError" @close="adClose"></ad-custom>
														
													</view>
													<view class="info">
														<view class="title u-line-1">请叫我可爱的广告</view>
														<view class="text u-line-1">刷到我说明缘分到了</view>
													</view>
												</view>
											</view> 
											<view v-else  @click="maidian(lItem.id);openVideoDetail(lItem.id, lItem.title, lItem.image, lItem.description)">
												<!-- #ifdef MP-WEIXIN -->
													
													<view >
														<view  class="img">
															<image class="image" :src="lItem.image" mode="aspectFill"></image>
														</view>
														<view class="info">
															<view class="title u-line-1">{{ lItem.title }}</view>
															<view class="text u-line-1">{{ lItem.description }}11</view>
														</view>
													</view>	
												
													<!-- #endif -->
													<!-- #ifndef MP-WEIXIN -->
														<view  class="img">
															<image class="image" :src="lItem.image" mode="aspectFill"></image>
														</view>
														<view class="info">
															<view class="title u-line-1">{{ lItem.title }}</view>
															<view class="text u-line-1">{{ lItem.description }}22</view>
														</view>
														<!-- #endif -->
											</view>
											
										</view>
									<!-- #endif -->
									<!-- #ifndef APP -->
										<template  v-if="lIndex != 0">
											<view class="item item1"  v-if="lieAd&&lIndex % 6== 0 && lIndex!=0" >
												<view>
													<view class="img">
														<ad-custom :unit-id="lieid" bindload="adLoad" binderror="adError" @close="adClose"></ad-custom>
														
													</view>
													<view class="info">
														<view class="title u-line-1">请叫我可爱的广告</view>
														<view class="text u-line-1">刷到我说明缘分到了</view>
													</view>
												</view>
											</view> 
											<view v-else class="item item1"  @click="maidian(lItem.id);openVideoDetail(lItem.id, lItem.title, lItem.image, lItem.description)">
												<!-- #ifdef MP-WEIXIN -->
													
													<view >
														<view  class="img">
															<image class="image" :src="lItem.image" mode="aspectFill"></image>
														</view>
														<view class="info">
															<view class="title u-line-1">{{ lItem.title }}</view>
															<view class="text u-line-1">{{ lItem.description }}33</view>
														</view>
													</view>	
												
													<!-- #endif -->
													<!-- #ifndef MP-WEIXIN -->
													<!--:src="lItem.image||'../../static/images/close.png'"-->
														<view  class="img">
															<!--<image class="image" src="" mode="aspectFill" lazy-load="true"></image>-->
															<u-image :src="lItem.image" width="100%" height= "159px" :loading-icon='tc' mode="aspectFill" :fade="true" duration="500"></u-image>

														</view>
														<view class="info">
															<view class="title u-line-1">{{ lItem.title }}</view>
															<!--<view class="text u-line-1">{{ lItem.description }}44</view>-->
														</view>
														<!-- #endif -->
											</view>
											
										</template>
									<!-- #endif -->
									
								</block>
							</view>
							<view class="list" v-else>
								<view class="item item2" v-for="(lItem, lIndex) in item.list" :key="lIndex" @click="maidian(lItem.id);openVideoDetail(lItem.id, lItem.title, lItem.image, lItem.description)">
									<view class="img">
										<image class="image" :src="lItem.image" mode="aspectFill"></image>
									</view>
									<view class="info">
										<view class="title u-line-1">{{ lItem.title }}</view>
										<view class="text u-line-1">{{ lItem.description }}</view>
									</view>
								</view>
							</view>
						
							
							<view class="nodata" v-if="!item.list.length && item.status == 'nomore'">
								<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
							</view>
							<view class="liststatus" v-else>
								<u-loadmore :status="item.status" :line="true" />
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		
		</view>
		<view class="copyright" v-if="copyrightData.length" @click="debugClick">
			<view class="item" v-for="(item, index) in copyrightData" :key="index">
				<image class="image" v-if="item.image" :src="item.image" mode="widthFix"></image>
				<!-- #ifdef MP-WEIXIN -->
				<text class="text">{{ item.name }}</text>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<a v-if="item.url" :href="item.url" target="_blank" rel="">
					<text class="text">{{ item.name }}</text>
				</a>
				<text v-else class="text">{{ item.name }}</text>
				<!-- #endif -->
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<zero-privacy :onNeed="false" :hideTabBar="true"></zero-privacy>
		<!-- #endif -->
		
		<!-- <tabBar v-if="tabChange" selectedIndex = 0></tabBar> -->
	</view>
</template>

<script>	
	import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
	export default {
		data() {
			return {		
				isBgColor:getApp().globalData.isBgColor,
				tc:'',
				isStatue:getApp().globalData.status,
				navbarTitle: this.$store.state.app.title || '影视视频',
				tabsActiveStyle: {
					// backgroundImage:`${getApp().globalData.isBgColor}`,
					 // backgroundClip:'text',
					// '-webkitBackgroundClip':'text',
					color:'#ffffff',
					fontSize: '14px',
					transform: 'scale(1.3)'
					// fontWeight: 'bold',
				},
				copyrightData: this.$store.state.app.copyright || [], // 版权说明
				tabsInactiveStyle: {
					color: '#ffffff',
					fontSize: '14px'
				},
				contentList: [
					{ id: 0, name: '精选短剧', list: [], page: 1, pagesize: 10, status: 'loadmore' },
				],
				contentCurrent: 0,
				refreshStatus: true,
				isRefresh: false,
				tabsList: [
					{ id: 1, name: '推荐', type: 'recommend' },
					{ id: 2, name: '最新', type: 'new' },
					{ id: 3, name: '热门', type: 'hot' },
					{ id: 4, name: '好评', type: 'score' },
					{ id: 5, name: '免费', type: 'free' },
				],
				tabsActive: { id: 1, name: '推荐', type: 'recommend' },
				isTabsFixed: false,
				//tab更新
				tabChange:false,
				//判断微信插屏广告是否展示
				chapingAd:false,
				//插屏
				chaAd:null,
				//插屏广告ID
				chapingId:"",
				platforms: this.$utils.platforms(),
				//列表广告
				lieAd:false,
				lieid:"",
				AdNumber:getApp().globalData.isADTc,
				//二维码弹窗
				tcTrue:true,
				tcCenter:true,
			}
		},
		computed: {
			...mapGetters("user", ["token", "userInfo"]),
			...mapGetters("app", ["title","richtext"]),
		},
		watch: {
			
			
			title(newValue, oldValue) {
				this.navbarTitle = newValue
			},
			userInfo(newValue, oldValue) {
				this.userInfo = newValue
			},
			AdNumber(newValue, oldValue) {
				////console.log(newValue,'查看变化')
				if(newValue == 3){
					uni.showModal({
						title: '免广告权限',
						content: `温馨提示：可在[我的]页面开通免广告权限`,
						showCancel:false,
						success: res => {
							if (res.confirm) {
								
							}
						}
					})
					this.AdNumber = 0
					 
					getApp().globalData.isADTc = this.AdNumber
				}else{
					 this.AdNumber = newValue
					getApp().globalData.isADTc = this.AdNumber
				}
			}
			
		},
		onTabItemTap() {
				this.$request('common.point', { item_id:1 , platform:this.platforms, point_type:5 },false).then(res => {
				
				})
			},
		async onShow() {
			this.AdNumber=getApp().globalData.isADTc
			 await this.$onLaunched
			 // #ifdef MP-WEIXIN
			if(this.userInfo.mgg == 1){
				this.lieAd = false,
				this.chapingAd = false
				this.lieid = null
				this.chapingId = null
				for(var key in this.contentList[this.contentCurrent].list){  // 自定义变量,存储索引 0 1 2 3 4 ....
					if( this.contentList[this.contentCurrent].list[key].kong ==1){
						this.contentList[this.contentCurrent].list.splice(key, 1);
					}
				       
				}
			}else{
				if(this.chapingAd ){
					this.adInit()
					
				}
			}
			 
			 	
			  // #endif 
			this.tabChange = true
			this.isBgColor  = getApp().globalData.isBgColor
			// this.tabsActiveStyle.backgroundImage = getApp().globalData.isBgColor
			this.isStatue = getApp().globalData.status
			
		},
		onHide(){
			this.tabChange = false
		},
		async onLoad() {
			    uni.setNavigationBarTitle({
			      title: '首页'
			    });
			await this.$onLaunched
			this.getVideoClassify()
			// #ifdef MP-WEIXIN
			
			this.getAD()
			
			 // #endif 
		},
		methods: {
			adClose(){
				 this.AdNumber++
				////console.log('关闭了')
			},
			//maidian
			maidian(ids){	
				
				this.$request('common.point', { item_id: ids, platform:this.platforms, point_type:1 },false).then(res => {
				
				})
			},
			// 	收藏
			handleCollect(id, collect, index) {
				if(collect == 0) {
					const obj = { vid: id, type: 'favorite' }
					this.$request('video.addRecord', obj, false).then(res => {
						if(res.code === 1) {
							this.contentList[this.contentCurrent].list[index].is_favorite = 1
						}
					})
				} else {
					const obj = { ids: id, type: 'favorite' }
					this.$request('video.deleteRecord', obj, false).then(res => {
						if(res.code === 1) {
							this.contentList[this.contentCurrent].list[index].is_favorite = 0
						}
					})
				}
			},
			//获取插屏广告
			getAD(){
				// #ifdef MP-WEIXIN
				
				this.$request('common.wxguanggao', '',false).then(res => {
					if(res.code === 1) {
						////console.log(res)
						
						if(res.data.list.gg_shouye_id && res.data.list.gg_shouye_switch == '1'){
							if(res.data.mgg == 1){
								
							}else{
								this.chapingId = res.data.list.gg_shouye_id
								this.chapingAd = true
								this.adInit()
							}
						
						}
						if(res.data.list.gg_liebiao_id && res.data.list.gg_liebiao_switch == '1'){
							if(res.data.mgg == 1){
								
							}else{
								this.lieid = res.data.list.gg_liebiao_id
								this.lieAd = true
							
							}
						
						}
						
					}
				})
				// #endif
				
			
				
			},
			//插屏广告
			adInit(){
				if(this.chaAd){
					////console.log('走了')
					  this.chaAd.show().catch((err) => {
					    ////console.error('插屏广告显示失败', err)
					  })
					
				}else{
					if (wx.createInterstitialAd) {
					  this.chaAd = wx.createInterstitialAd({
					    adUnitId: this.chapingId
					  })
					  this.chaAd.onLoad(() => {})
					  this.chaAd.onError((err) => {
					    ////console.error('插屏广告加载失败', err)
					  })
					  this.chaAd.onClose(() => {
						  this.AdNumber++
						  ////console.log('关闭')
					  })
					}
				}
			},
			// 获取视频分类
			getVideoClassify() {
				this.$request('video.classify').then(res => {
					if(res.code === 1) {
						if(res.data && res.data.length) {
							const data = res.data.filter(item => item.type == 'video')[0].children
							const arr = data.map(({ id, name }) => ({ id, name, list: [], page: 1, pagesize: 10, status: 'loadmore' }))
							this.contentList = this.contentList.concat(arr)
							this.getVideoList()
						}
					}
				})
			},
			// 获取视频列表
			getVideoList() {
				let  status = uni.getSystemInfoSync().uniPlatform
				const obj = {
					category_id: this.contentCurrent == 0 ? '' : this.contentList[this.contentCurrent].id,
					type: this.contentCurrent == 0 ? this.tabsActive.type : '',
					page: this.contentList[this.contentCurrent].page,
					pagesize: this.contentList[this.contentCurrent].pagesize,
					platform: status == 'mp-weixin'? 2 :1,
					

					
				}
				this.contentList[this.contentCurrent].status = 'loading'
				if (!uni.getStorageSync("commonUrl")) {
					setTimeout(() => {
						this.getVideoList();
					}, 100);
					return;
				}
				this.$request('video.list', obj).then(res => {
					if(res.code === 1) {
						if(res.data && res.data.length) {
							////console.log(this.contentList[this.contentCurrent].list,'数据')
							for(var key in this.contentList[this.contentCurrent].list){  // 自定义变量,存储索引 0 1 2 3 4 ....
								if( this.contentList[this.contentCurrent].list[key].kong ==1){
									this.contentList[this.contentCurrent].list.splice(key, 1);
								}
							       
							}
							
							this.contentList[this.contentCurrent].list = this.contentList[this.contentCurrent].list.concat(res.data)
							// #ifdef MP-WEIXIN
							
								if(this.userInfo.mgg == 1 ){
									////console.log('走了')
								}else{
									if(this.lieAd ){
										for(var key in this.contentList[this.contentCurrent].list){  // 自定义变量,存储索引 0 1 2 3 4 ....
											if(key %6  == 0 && key!=0){
												this.contentList[this.contentCurrent].list.splice(key, 0, {kong:1});
											}
										       
										}
									}
									
								}
							
							 // #endif 
						
							
							
							this.contentList[this.contentCurrent].status = 'loadmore'
							if(res.data.length < this.contentList[this.contentCurrent].pagesize) {
								this.contentList[this.contentCurrent].status = 'nomore'
							} else {
								this.contentList[this.contentCurrent].status = 'loadmore'
							}
						} else {
							this.contentList[this.contentCurrent].page > 1 && this.contentList[this.contentCurrent].page--
							const timer = setTimeout(() => {
								this.contentList[this.contentCurrent].status = 'nomore'
								clearTimeout(timer)
							}, 500)
						}	
						 let url =""
				            uni.getStorage({
	                            key: 'commonUrl',
	                            success: function (res) {
		                             url=res.data.imgUrl
	                            }
                           });
						this.contentList.forEach(item=>{
							item.list.forEach(i=>{
								let str=i.image.substring(i.image.length - 3);
								
								if(str =='jpg'){
									let c=url+i.image+'.txt'
									uni.request({
										url:c,
										success: (res) => {
											////console.log(res)
										       i.image=res.data
										    }
									})
								}
								//i.image=url+i.image+'.txt'
								
								// 判断是否既不以 "data:image/jpg;base64" 开头，也不以 "http://" 或 "https://" 开头  
								if (!(i.image.startsWith("data:image/jpg;base64") || i.image.startsWith("http"))) {  
									console.log("The image URL is neither a base64 string nor a valid HTTP URL.");  
									// 在这里处理既非 base64 也非有效 HTTP URL 的情况  
									i.image=url+i.image+'.txt'
								}
								
								
							})
						})
						////console.log("改造数据",this.contentList);
					}
					this.refreshStatus = false
					this.isRefresh = false
				}).catch(err => {
					this.refreshStatus = false
					this.isRefresh = false
				})
				
			},
			// 下拉刷新
			refreshHandle() {
				this.refreshStatus = true
				if(!this.isRefresh) {
					this.isRefresh = true
					this.contentList[this.contentCurrent].page = 1
					this.contentList[this.contentCurrent].list = []
					this.getVideoList()
				}
			},
			// 滚动监听
			scrollHandle(e) {
				if(this.contentCurrent == 0) {
					this.isTabsFixed = e.detail.scrollTop > 200 ? true : false
				}
			},
			// 触底滚动
			bottomHandle() {
				this.contentList[this.contentCurrent].page++
				this.getVideoList()
			},
			// 切换分类
			changeContent(e, i) {
				let current = i === 1 ? e.index : e.detail.current
				if(current == this.contentCurrent) return
				this.contentCurrent = current
				!this.contentList[this.contentCurrent].list.length && this.getVideoList()
			},
			// 切换tabs
			changeTabs(item) {
				if(item.id == this.tabsActive.id) return
				this.tabsActive = item
				this.contentList[0].page = 1
				this.contentList[0].list = []
				this.getVideoList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	image{will-change: transform}
	.copyright {
		margin-top: 40rpx;
		
		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 36rpx;
			
			a {
				text-decoration: none;
			}
			
			.image {
				width: 30rpx;
				margin-right: 8rpx;
			}
			
			.text {
				font-size: 24rpx;
				color: rgba(#999, 0.5);
			}
		}
	}
	.positionD{
		width: 116rpx;
		height: 154rpx;
		position: fixed;
		bottom: 100rpx;
		right: 20rpx;
		.img{
			width: 100%;
			height: 100%;
		}
		.close{
			position: absolute;
			top: -30rpx;
			right: -20rpx;
			width: 40rpx;
			height:40rpx;
		}
	}
	.kftc{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 10;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			width: 460rpx;
			height: 600rpx;
		}
	}
	.page_content {
		overflow: hidden;
		
		.tabs {
			padding-bottom: 30rpx;
			display: flex;
			align-items: center;
			
			&.top {
				height: 0;
				padding: 0 40rpx;
				overflow: hidden;
				transition: all 0.2s linear;
				
				&.show {
					height: 94rpx;
					padding: 20rpx 40rpx;
				}
			}
			
			.item {
				color: #666666;
				padding: 6rpx 26rpx;
				border-radius: 50rpx;
				font-size: 24rpx;
				font-weight: 700;
				
				&.active {
					color: #fff;
					
				}
			}
			.tab-item {
				color: #666666;
				padding: 4px 12px;
				border-radius: 4rpx;
				font-size: 24rpx;
				font-weight: 700;
				background: #F0F0F0;
				
				+.tab-item {
					margin-left: 12px;
				}
				
				&.active {
					color: #fff;
					background: linear-gradient(90deg, #FFD9AF 0%, #FF6C83 100%);
				}
			}
		}
		
		.header_logo {
			.search {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-left: 6px;
				box-sizing: border-box;
				background: rgba(255, 255, 255, 0.5);
				color: #ffffff;
				width: 132px;
				height: 29px;
				border: 0.5px solid #ffffff;
				border-radius: 14px;
				font-size: 12px;
			}
		}
		.head_content {
			.tabs_box {
				padding: 0 20rpx 10rpx;
				// margin-right: 80rpx;
				// position: relative;
				
				// .search {
				// 	position: absolute;
				// 	top: 50%;
				// 	right: 0;
				// 	transform: translate(100%, -55%);
				// }
			}
		}
		
		.main_content {
			overflow: hidden;
			
			.content_box {
				padding: 20rpx 40rpx 20rpx 40rpx;
				
				.list {
					
					display: flex;
					flex-wrap: wrap;
					
					.sitem {
						width: 100%;
						height: 516rpx;
						border-radius: 20rpx;
						overflow: hidden;
						display: flex;
						margin-bottom: 40rpx;
						
						.left {
							width: 52%;
							
							.image {
								width: 100%;
								height: 100%;
							}
						}
						
						.right {
							width: 48%;
							// background: linear-gradient(0deg, rgba(35, 36, 40, 1) 0%, rgba(100, 105, 124, 1) 100%);
							background-color: rgba(255, 255, 255, 0.5);
							padding: 30rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							color: #4a4a4a;
							
							.info {
								height: 100%;
								display: flex;
								flex-direction: column;
								
								.tbox {
									flex: 1;
								}
								
								.title {
									font-size: 32rpx;
									font-weight: 700;
								}
								
								.u-line-8 {
									display: -webkit-box !important;
									overflow: hidden;
									text-overflow: ellipsis;
									word-break: break-all;
									-webkit-line-clamp: 7;
									-webkit-box-orient: vertical !important;
								}
								.text {
									font-size: 24rpx;
									margin-top: 16rpx;
									// color: #4a4a4a;
									line-height: 40rpx;
								}
								
								.text1 {
									flex: 1;
								}
							}
							
							.button {
								height: 70rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 28rpx;
								// background: #484B52;
								border-radius: 10rpx;
								margin-top: 16rpx;
								color: #ffffff;
								background: linear-gradient(90deg, #FFD9AF 0%, #FF6C83 100%);
								box-shadow: 0px 3px 12px 0px #FF708580;
								
								&.collect {
									opacity: 0.6;
								}
								
								&.active {
									background: rgba(#000, 0.2);
								}
								
								.text {
									margin-left: 8rpx;
								}
							}
						}
					}
					
					.item {
						width: calc((100% - 50rpx) / 3);
						margin-bottom: 40rpx;
						margin-right: 8px;
						
						// &.item1 {
						// 	&:nth-child(10n),
						// 	&:nth-child(10n-3),
						// 	&:nth-child(10n-6) {
						// 		margin-right: 0;
						// 	}
						// }
						
						// &.item2 {
						// 	&:nth-child(3n) {
						// 		margin-right: 0;
						// 	}
						// }
						
						.img {
							width: 100%;
							height: 280rpx;
							border-radius: 20rpx;
							overflow: hidden;
							
							.image {
								width: 100%;
								height: 100%;
							}
						}
						
						.info {
							margin-top: 16rpx;
							
							.title {
								font-size: 28rpx;
								color: #111;
								font-weight: 700;
							}
							
							.text {
								font-size: 24rpx;
								color: #666;
								margin-top: 4rpx;
							}
						}
					}
				}
				
				.nodata {
					padding: 15vh 0;
				}
			}
		}
	}
</style>